<template>
  <div class="content" @click="click">
    <div v-if="list.state === 0">
      <p class="state">当前订单状态：<span>商品已拍下，等待买家付款</span></p>
      <p class="tips">倒计时：</p>
      <span data-index="4">关闭订单</span>
    </div>
    <div v-if="list.state === 1">
      <p class="state">当前订单状态：<span>买家已付款，交易成功</span></p>
      <ul class="msg">
        <li>交易成功，提醒买家评论商品，会带来更多购买量。</li>
        <li>交易成功，如果买家提出售后要求，要积极与买家协商，积极做好售后。</li>
        <li>
          如果买家提前确认收货，包裹还未全部被送达，及时跟踪物流信息，给买家一个好的购物体验。
        </li>
      </ul>
      <span data-index="3">申请退款</span>
    </div>
    <div v-if="list.state === 2">
      <p class="state">当前订单状态：<span>买家申请退款</span></p>
      <p class="tips">退款介绍：</p>
      <span data-index="1">同意申请</span>
      <span data-index="2">拒绝申请</span>
    </div>
    <div v-if="list.state === 3">
      <p class="state">当前订单状态：<span>退款中</span></p>
      <p class="tips">
        请等待几个工作日，资金会返回原账户。如未收到，请及时联系客服处理。
      </p>
    </div>
    <div v-if="list.state === 4">
      <p class="state">当前订单状态：<span>已关闭</span></p>
      <p class="tips">该订单已经关闭。可以联系客户重新下单或询问客户未付款原因</p>
    </div>
  </div>
</template>

<script>
import { msgBox } from "@/api/order_notice";  //封装弹框的函数
export default {
  props: ["list"],
  methods: {
    click(event) {
      let that = this;
      let num = event.target.getAttribute("data-index");
      switch (num) {
        case "4":
          msgBox(that, "即将关闭订单", 4, this.list.ord_num);
          break;
        case "1":
          msgBox(that, "同意用户退款请求", 2, this.list.ord_num);
          break;
        case "2":
          msgBox(that, "拒绝用户退款请求", 1, this.list.ord_num);
          break;
        case "3":
          msgBox(that, "该订单已交易完成，即将给客户申请退款请求", 3, this.list.ord_num);
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.content {
  width: 95%;
  margin: 20px auto;
  border: 1px solid lightgray;
  padding: 20px;
  box-sizing: border-box;
}
.content > div > span {
  cursor: pointer;
  display: inline-block;
  padding: 4px 10px;
  background: #55ca7d;
  color: white;
  border-radius: 10px;
  margin-right: 20px;
}
.state {
  color: #666;
  font-size: 16px;
  font-weight: bold;
  margin: 12px 0;
}
.state span {
  color: red;
}
.tips {
  margin: 12px 0;
}
.msg {
  line-height: 20px;
  margin-bottom: 12px;
  border: none;
}
</style>
